<!DOCTYPE html>
<!-- HTML5 文档声明 -->
<html lang="zh">
<!-- 设置页面语言为中文 -->
<head>
    <!-- 元数据区域 -->
    <meta charset="UTF-8">
    <!-- 设置字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 响应式视口设置 -->
    <title>视频倍速播放演示</title>
    <!-- 页面标题 -->
    <style>
        /* 页面样式表 */
        .container {
            max-width: 800px;  /* 容器最大宽度 */
            margin: 20px auto;  /* 上下边距20px，左右自动居中 */
            text-align: center; /* 内容居中 */
        }
        video {
            width: 100%;        /* 视频宽度占满容器 */
            margin-bottom: 20px; /* 底部间距 */
        }
        .controls {
            margin-top: 10px;  /* 控制区域顶部间距 */
        }
        .speed-btn {
            margin: 0 5px;      /* 按钮左右间距 */
            padding: 5px 10px;  /* 按钮内边距 */
            cursor: pointer;    /* 鼠标指针样式 */
        }
        .speed-btn.active {
            background-color: #4CAF50;  /* 活动按钮背景色 */
            color: white;               /* 活动按钮文字颜色 */
        }

        
    </style>

</head>
<body>
    <div class="container">
        <!-- 视频播放器容器 -->
        <video id="videoPlayer" controls>
            <!-- 视频播放器，带原生控制条 -->
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            <!-- 视频源文件 -->
            您的浏览器不支持视频标签。
            <!-- 浏览器不支持时的提示 -->
        </video>
        
        <div class="controls">
            <!-- 控制区域 -->
            <button id="playPauseBtn">播放/暂停</button>
            <!-- 播放/暂停按钮 -->
            <div class="speed-controls">
                <!-- 倍速控制区域 -->
                播放速度：
                <button class="speed-btn" data-speed="0.5">0.5x</button>
                <button class="speed-btn" data-speed="1" class="active">1x</button>
                <button class="speed-btn" data-speed="1.5">1.5x</button>
                <button class="speed-btn" data-speed="2">2x</button>
                <!-- 不同倍速的按钮 -->
            </div>
        </div>
    </div>

    <script>
        // JavaScript 功能实现
        // 获取DOM元素
        const video = document.getElementById('videoPlayer');  // 视频元素
        const playPauseBtn = document.getElementById('playPauseBtn');  // 播放/暂停按钮
        const speedBtns = document.querySelectorAll('.speed-btn');  // 所有倍速按钮

        // 播放/暂停控制
        playPauseBtn.addEventListener('click', () => {
            if (video.paused) {
                video.play();  // 如果暂停则播放
            } else {
                video.pause(); // 如果播放则暂停
            }
        });

        // 倍速控制
        speedBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // 设置播放速度
                const speed = parseFloat(btn.dataset.speed);  // 从data-speed属性获取倍速值
                video.playbackRate = speed;  // 设置视频播放速度
                
                // 更新活动按钮样式
                speedBtns.forEach(b => b.classList.remove('active'));  // 移除所有按钮的active类
                btn.classList.add('active');  // 为当前按钮添加active类
            });
        });
    </script>
</body>
</html>
